<template>
  <div id="app">
    <div class="content">
        <p class="content_vip">立即成为vip</p>
        <div class="content_jxsc">
            <h3 class="public_title">精选手册 <span class="public_span">查看更多 ></span> </h3>
            <ul class="public_uls">
                <li class="public_list" v-for="(value,index) of message" :key="index">
                    <div class="public_left">
                        <img class="public_image" :src="value.image">
                    </div>
                    <div class="public_center">
                        <p class="content_title">{{value.title}}</p>
                        <p class="content_time">{{value.time}}</p>
                    </div>
                    <div class="public_right">
                        <p class="public_jr">进入</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content_jxbk">
            <h3 class="public_title">精选手册 <span class="public_span">查看更多 ></span> </h3>
            <ul class="public_uls">
                <li class="public_list" v-for="(value,index) of message" :key="index">
                    <div class="public_left">
                        <img class="public_image" :src="value.image">
                    </div>
                    <div class="public_center">
                        <p class="content_title">{{value.title}}</p>
                        <p class="content_time">{{value.time}}</p>
                    </div>
                    <div class="public_right">
                        <p class="public_jr">进入</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content_jxsp">
            <h3 class="public_title">精选手册 <span class="public_span">查看更多 ></span> </h3>
            <ul class="public_uls">
                <li class="public_list" v-for="(value,index) of message" :key="index">
                    <div class="public_left">
                        <img class="public_image" :src="value.image">
                    </div>
                    <div class="public_center">
                        <p class="content_title">{{value.title}}</p>
                        <p class="content_time">{{value.name}}</p>
                    </div>
                    <div class="public_right">
                        <p class="public_jr">进入</p>
                    </div>
                </li>
            </ul>
        </div>
        
        <p class="content_xjbg">晓舟报告 <span class="content_xjbg_span">|</span> 团队介绍</p>
    </div>
  </div>
</template>
<script>
import "../../public/js-app/fontsizeset";
export default {
    data(){
            return{
                message:[
                    {image:"/image-app/2.jpg",title:"java 电子书",time:"2020-01-09"},
                    {image:"/image-app/4.jpg",title:"node 电子书",time:"2020-02-09"}
                ]
            }
        },
    methods:{
  }
}  
</script>
<style>
    *{
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
    }
    .content{
        width: 11.4rem;
        height: 100%;
        margin: auto;
        /* padding-top: 0.6rem; */
    }
    .content_vip{
        width: 100%;
        height: 1.2rem;
        background-color: rgb(244, 227, 185);
        border-radius: 0.25rem;
        font-size: 0.36rem;
        color: rgb(153, 127, 36);
        line-height: 1.2rem;
        text-align: right;
        margin-top: 0.5rem;
    }
    .public_uls{
        list-style-type: none;
    }
    .content_jxsc,.content_jxsp,.content_xjbg{
        width: 100%;
        height: 7.92rem;
    }
    .public_title{
        font-size: 0.48rem;
        color: rgb(33, 37, 41);
        line-height: 1.48rem;
    }
    .public_span{
        font-size: 0.4rem;
        color: rgb(179, 179, 179);
        line-height: 1.48rem;
        font-weight: initial;
        float: right;
    }
    .public_list{
        width: 11.4rem;
        height: 2.65rem;
        margin-bottom: 0.5rem;
    }
    .public_left,.public_image{
        width: 3.42rem;
        height: 2.15rem;
        float: left;
    }
    .public_center{
        width: 5.86rem;
        height: 2.15rem;
        margin-left: 0.4rem;
        float: left;
        padding-top: 0.28rem;
    }
    .content_title{
        font-size: 0.4rem;
        margin-bottom: 0.34rem;
    }
    .content_time{
        font-size: 0.32rem;
        color: rgb(179, 179, 179);
    }
    .public_right{
        width: 1.65rem;
        height: 2.15rem;
        padding-top: 0.28rem;
        float: left;
    }
    .public_jr{
        width: 1.65rem;
        height: 0.65rem;
        background-color: rgb(103, 204, 254);
        border-radius: 0.25rem;
        font-size: 0.4rem;
        text-align: center;
        line-height: 0.65rem;
    }
    .content_xjbg{
        width: 11.4rem;
        height: 1.28rem;
        font-size: 0.38rem;
        line-height: 1.38rem;
        text-align: center;
        color: rgb(106, 211, 254);
    }
    .content_xjbg_span{
        color: rgb(190, 190, 190);
    }
</style>